<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>注册</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html, body{
            height: 100%;
        }
        body{
            font-size: .4348rem;
            font-family: 微软雅黑;
            background: linear-gradient(#cbffc8, #37eaff);
            overflow: hidden;/**/
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }
        a{
            text-decoration: none;
            color: #8c8c8c;
        }
        a.register{
            color: #4c97fb;
        }
        ul li{
            list-style: none;
        }
        #box{/*
            border: 1px solid red;*/
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            position: relative;
        }
        .top{/**/
            border: .0966rem solid #ffffff87;
            width: 95%;
            display: flex;
            flex-direction: column;
            align-items: center;
            background: #ffffff57;
            border-radius: .2415rem;
            transform: translateY(1.2077rem);
            box-shadow: .1208rem .1208rem .1208rem #87878726;
        }
        .top .icon{/*
            border: 1px solid rgba(255, 0, 0, 0.115);*/
            
            font-size: .4831rem;
            font-weight: 600;
            margin-top: .9662rem;
            margin-bottom: .4831rem;
            color: #717171;
        }
        .top .form{/*
            border: 1px solid red;*/
            display: flex;
            flex-direction: column;
            align-items: center;
            box-sizing: border-box;
            padding: .2415rem;
            width: 80%;
        }
        .form>div{
            width: 100%;
            margin-bottom: .314rem;
            display: flex;
            flex-direction: row;
            align-items: center;
            position: relative;
        }
        .form input{/*iphone 无法获得焦点并输入 
            all: unset;*/
            width: 100%;
            border: .0242rem solid rgba(128, 128, 128, 0.522);
            border-radius: .5556rem;
            caret-color: #4c97fb;
            height: 1.0145rem;
            box-sizing: border-box;
            padding-left: 1.0386rem;
            padding-right: .4348rem;
            font-size: .4348rem;
            background: none;

        }
        .form input[type="text"]{
            padding-right: 1.3285rem;
        }
        .icon1{/*
            border: 1px solid red;*/
            width: .8454rem;
            height: .8454rem;
            margin-left: .1691rem;
            position: absolute;
            background: url(../../images/login/phone.webp) no-repeat;
            background-size: contain;
        }
        .icon11{/*
            border: 1px solid red;*/
            border-radius: .5556rem;
            width: 1.8116rem;
            height: .8696rem;
            position: absolute;
            right: .0725rem;
            background: #4c97fb;
            color: #fff;
            font-size: .4106rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .icon2{/*
            border: 1px solid red;*/
            width: .8454rem;
            height: .8454rem;
            margin-left: .1691rem;
            position: absolute;
            background: url(../../images/login/pwd.webp) no-repeat;
            background-size: contain;
        }
        .icon3{/*
            border: 1px solid red;*/
            width: .8454rem;
            height: .8454rem;
            margin-left: .1691rem;
            position: absolute;
            background: url(../../images/login/code.webp) no-repeat;
            background-size: contain;
        }
        input::placeholder{
            color: #bcbcbc;
        }
        input:focus{
            border: .0242rem solid #4c97fb;
            box-shadow: .0725rem .0725rem .0725rem #a5a5a583;
        }
        .form button{
            all: unset;
            width: 100%;
            height: 1.0145rem;
            border-radius: 1.4493rem;
            background: #4c97fb;
            line-height: 100%;
            text-align: center;
            color: #fff;
            font-weight: 500;
            font-family: 黑体;
            font-family: SimHei;
            margin-top: .3623rem;
        }
        .bottom{/*
            border: 1px solid red;*/
            color: #8c8c8c;
            font-size: .3865rem;
            display: flex;
            flex-direction: row;
            justify-content: center;
            margin-bottom: 15%;
        }

        /*#c1*/
        .c{
            position: absolute;
            width: 100%;
            height: 100%;
            background: #00000047;
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        #c1{
            position: absolute;/*
            width: 100%;*/
        }
        /*弹窗样 式*/
        #alert{
            position: absolute;
            width: 100%;
            height: 100%;
            background: #00000047;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .window{
            border-radius: .2415rem;
            font-size: .4106rem;
            color: #fff;/*
            width: fit-content;*/
            max-width: 80%;
            min-height: .4831rem;
            display: flex;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            padding: .1932rem .4831rem;
            background-color: #323232;
        }
    </style>
    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
    <script src="../../lib/axios.js"></script>
    <script src="../../lib/vue.js"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=wfSQ0h69XGW0C375EDuFiUVnbwn8MWGk"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=wfSQ0h69XGW0C375EDuFiUVnbwn8MWGk"></script>
    <script src="https://cdn.dingxiang-inc.com/ctu-group/captcha-ui/v5/index.js" crossorigin="anonymous" id="dx-captcha-script"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> -->
</head>
<body>
    <div id="box">
        <div class="top">
            <div class="icon">手机注册</div>
            <div class="form">
                <div>
                    <div class="icon1"></div>
                    <input type="text" v-model="phone" @input="handleInputPhone()" name="" id="phone" placeholder="手机号">
                    <div class="icon11" v-show="sendShow" @click.stop.once="handleSend">{{sendText}}</div>
                </div>
                <div>
                    <div class="icon2"></div>
                    <input type="password" v-model="password" name="password" placeholder="密码">
                </div>
                <div>
                    <div class="icon2"></div>
                    <input type="password" v-model="password2" name="password2" placeholder="确认密码">
                </div>
                <div v-show="codeShow">
                    <div class="icon3"></div>
                    <input type="text" v-model="code" name="code" placeholder="验证码">
                </div>
                
                <button @click="handleVer()"  v-show="codeShow" :codeId="codeId" type="button">验证</button>
                
            </div>
        </div>
        <div class="bottom">
            已有账号？<a class="register" href="./login.html">登录</a>
        </div>

        <!-- 行为验证 -->
        <div class="c">
            <div id="c1"></div>
        </div>
        
        <!-- 弹窗 -->
        <div id="alert" v-show="alertShow" @click="closeAlert()">
            <div class="window">
                {{alertText}}
            </div>
        </div>


        <div id="allmap" style="display: none;"></div>

    </div>
    <script>
        Vue.config.productionTip =false;
        new Vue({
            el: "#box",
            data: {
                phone: "",
                sendText: "发送",
                password: "",
                password2: "",
                code: "",
                codeId: "",
                codeShow: false,
                sendShow: false,
                alertShow: false,
                alertText: "",
                address: "",
                ipAddress: "",
                GPS: ""
                
            },
            methods: {
                handleInputPhone(){
                    var notNull = /^\s*$/
                    var mobile = /^1[3456789]\d{9}$/
                    if(!notNull.test(this.phone)){//不为空
                        if(!mobile.test(this.phone)){//格式不正确
                            this.sendShow = false
                        }else{
                            this.sendShow = true
                        }
                    }else{
                        this.sendShow = false
                    }
                    
                },
                handleSend(evt){
                    this.getPosition()
                    var mobile = /^1[3456789]\d{9}$/
                    if(mobile.test(this.phone)){
                        let c = document.querySelector(".c")
                        c.style.display="flex"
                        let _this = this
                        var myCaptcha = _dx.Captcha(document.getElementById('c1'), {
                            appId: '1d79176932792f23e07d7ca8f5eba7d7', //appId，在控制台应用管理或应用配置模块获取
                            apiServer: 'https://vip6.dingxiang-inc.com',
                            success: function () {
                                //请求发送短信。
                                c.style.display="none"
                                //发送请求
                                axios.post("https://fc-mp-e8e2bde5-0c0c-4622-87b5-66f8b08c3856.next.bspapp.com/Judgement/smsJudgement?phone="+_this.phone+"&password="+_this.password+"&address="+_this.address+"&ipAddress="+_this.ipAddress+"&GPS="+_this.GPS)
                                .then(res=>{
                                    console.log(res.data)
                                    console.log(res.data.status+" "+res.data.serviceMsg)
                                    if(res.data.status !== 0){
                                        _this.alertShow = true
                                        _this.alertText = res.data.serviceMsg
                                    }else if(res.data.status === 0){//发送成功
                                        _this.sendText = '已发送'
                                        _this.codeShow = true
                                        var codeId = res.data.addResult.id
                                        _this.codeId = codeId
                                    }else{
                                        _this.alertShow = true
                                        _this.alertText = "服务器错误！"
                                    }
                                })
                                
                            }
                        })
                    }else{
                        this.alertShow = true
                        this.alertText = "请填写有效手机号！"
                    }
                    
                },
                handleVer(){
                    let pwdNotNull = /^\s*$/
                    if(pwdNotNull.test(this.password)){
                        this.alertShow = true
                        this.alertText="请填写密码！"
                    }else if(pwdNotNull.test(this.password2)){
                        this.alertShow = true
                        this.alertText="请填写确认密码！"
                    }else if(this.password !== this.password2){
                        this.alertShow = true
                        this.alertText="两次输入密码不一致！请重新填写密码！"
                    }else if(this.password === this.password2){
                        axios.get('https://fc-mp-e8e2bde5-0c0c-4622-87b5-66f8b08c3856.next.bspapp.com/Judgement/smsVerification?codeId='+this.codeId+'&code='+this.code+'&phone='+this.phone+'&password='+this.password+'&address='+this.address+'&ipAddress='+this.ipAddress+'&GPS='+this.GPS)
                        .then(res=>{
                            console.log(res.data)
                            switch (res.data.smsVerification.code) {
                                case 1:
                                    this.alertShow = true
                                    this.alertText="注册成功！"
                                    //跳转至登录页面
                                    window.location.replace("./login.html")
                                    break;
                                case 0:
                                    this.alertShow = true
                                    this.alertText="验证失败！"
                                    break;
                                default:
                                    this.alertShow = true
                                    this.alertText="验证环节失败！"
                                
                            }
                        })
                    }/**/
                    
                    
                    
                },
                closeAlert(){
                    this.alertShow = false
                },
                getPosition(){
                    _this = this
                    __this = this
                    //getIpAddress
                    var map = new BMapGL.Map("allmap");
                    function myFun(result){
                        var cityName = result.name;
                        _this.ipAddress = cityName;
                    }
                    var myCity = new BMapGL.LocalCity();
                    myCity.get(myFun); 
                    //getGps
                    function getLocation() {
                        var options = {
                            enableHighAccuracy: true,
                            maximumAge: 1000
                        };
                        if (navigator.geolocation) {
                            navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
                        } else {
                            // 否则浏览器不支持geolocation
                            alert('您的浏览器不支持地理位置定位！');
                        }
                    }
                    function onSuccess(position) {
                        // 经度
                        var longitude = position.coords.longitude;
                        // 纬度
                        var latitude = position.coords.latitude;
                        // 百度地图API功能
                        //GPS坐标
                        var x = longitude;//gps
                        var y = latitude;//gps
                        __this.GPS = longitude + ',' + latitude
                        let _this = this
                        var map = new BMap.Map("allmap");
                        var point = new BMap.Point(x, y);
                        var gc = new BMap.Geocoder();
                        gc.getLocation(point, function (rs) {
                            var addComp = rs.addressComponents;
                            __this.address = addComp.province + "" + addComp.city + "" + addComp.district+ "" + addComp.street + "" + addComp.streetNumber;
                        });
                    }

                    // 失败时的回调函数
                    // 这里是错误提示信息
                    function onError(error) {
                        var userBrowser = navigator.userAgent.toLowerCase()
                            if (userBrowser.match(/MicroMessenger/i) == "micromessenger"){
                                userBrowser = 'weixin'
                            } else if(userBrowser.match(/QQ/i) == 'qq') {
                                userBrowser = 'qq'
                            }
                        switch (error.code) {
                            case 1:
                                if(userBrowser == 'weixin'){
                                    alert("微信位置服务被拒，请开启授权或转至QQ客户端");
                                } else if(userBrowser == 'qq'){
                                    alert("QQ位置服务被拒，请开启授权或转至微信客户端");
                                }else{
                                    alert("浏览器位置服务被拒，请开启授权或转至微信/QQ客户端");
                                }
                                
                                break;
                            case 2:
                                alert("暂时获取不到位置信息！");
                                break;
                            case 3:
                                alert("获取信息超时！");
                                break;
                            case 4:
                                alert("未知错误！");
                                break;
                        }
                    }

                    getLocation();
                    
                }
                
            }
        })
    </script>






    <script>
        //根据设备宽度计算html的font-size
        function resetHtmlFont(){
            //获取html对象并动态设置font-size = 设备宽度的1/10
            document.documentElement.style.fontSize = screen.width/10 + 'px';
        }
        //执行一下
        resetHtmlFont();
        //如果窗口大小改变了，则重新计算基础font-size
        window.onresize = resetHtmlFont;
    </script>
</body>
</html>